<!--  -->
<template>
  <div class="domainBox">
    <div style="margin:24px 0;">
      <el-button size="small" type="primary" @click="addRedirect">增&nbsp;加</el-button>
    </div>
    <el-table v-loading="loading" size="medium" :data="urlData" border style="width: 100%">
      <el-table-column header-align="left" align="left" prop="fromUrl" label="来源链接" :resizable="false">
        <template slot-scope="scope">
          {{scope.row.type === 1 ? '404' : scope.row.fromUrl}}
        </template>
      </el-table-column>
      <el-table-column header-align="left" align="left" prop="toUrl" label="目标链接" :resizable="false">
      </el-table-column>
      <el-table-column label="状态" prop="isShow" width="200" align="center">
        <template slot-scope="scope">
          <el-switch v-model="isShow[scope.row.id]" active-color="#13ce66"
            @change="changeShow(scope.row, isShow[scope.row.id])">
          </el-switch>
          <span class="nott">{{isShow[scope.row.id]? '启用' : '禁用'}}</span>
          <!-- {{scope.row.status > 0 ? '启用' : '禁用'}} -->
        </template>
      </el-table-column>
      <el-table-column width="150" header-align="center" align="center" fixed="right" label="操作" :resizable="false">
        <template slot-scope="scope">
          <el-button @click="edititem(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteitem(scope.row)" type="text" size="small" v-if="!scope.row.type">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Addurl ref="add" :resetData="resetData" />
  </div>
</template>

<script>
import Addurl from '@/components/main/user/host/domain/redirect/Addurl.vue'
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
export default {
  created () {
    this.resetData()
    PubSub.subscribe(PubsubType.PUBSUB_DELETE_DOMAIN_PUSH, () => {
      this.resetData()
    })
  },
  data () {
    return {
      formInline: {
        domain: ''
      },
      urlData: [],
      isShow: {},
      loading: false
    }
  },
  watch: {
    urlData: {
      handler (newValue) {
        if (newValue.length > 0) {
          newValue.forEach(item => {
            this.isShow[item.id] = item.status > 0
          })
        } else {
          this.isShow = {}
        }
      },
      deep: true
    }
  },
  methods: {
    resetData () {
      this.loading = true
      this.$post('/host-redirect-url/list').then(response => {
        if (response && response.length > 0) {
          this.urlData = response
        } else {
          this.urlData = []
        }
        this.loading = false
      })
    },
    addRedirect () {
      this.$refs['add'].show()
    },
    changeShow (item, status) {
      let param = JSON.parse(JSON.stringify(item))
      param.status = status ? 1 : 0
      // 请求后台修改状态
      this.$jpost('/host-redirect-url/save', param).then(response => {
        if (response && response.length > 0) {
          this.resetData()
        }
      })
    },
    edititem (data) {
      this.$refs['add'].show(data)
    },
    deleteitem (data) {
      this.$confirm('确定要删除 ' + data.fromUrl + ' 跳转到 ' + data.toUrl + ' 的链接重定向', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$post('/host-redirect-url/delete', { id: data.id }).then(response => {
          if (response) {
            this.resetData()
          }
        })
      }).catch(() => {
      })
    }
  },
  components: {
    Addurl
  }
}

</script>
<style scoped>
.domainBox /deep/ .el-table th {
  background: #EFF1F8;
  color: #555;
  border-color: #fff;
}
.domainBox /deep/ .el-table__fixed-right{
  height: 100% !important;
}
.nott{
  font-size: 13px;
}
</style>
